<template>
  <div class="newpage">
    <iu-header>
      <template #left>
        <x-icon
          @click="back"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>{{ tag === 1 ? "安全隐患" : "我的隐患" }}</template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="newpage_work">
      <tab
        class="device-manege-tab"
        active-color="#456de6"
        default-color="#fff"
        custom-bar-width="90%"
      >
        <tab-item
          @on-item-click="eventTabChange(item)"
          :selected="statusIndex === item.key"
          v-for="item in tabNav"
          :key="item.key"
        >
          <div class="tab-item">
            <span>
              {{ item.num }}
            </span>
            <span>
              {{ item.value }}
            </span>
          </div>
        </tab-item>
      </tab>
      <div class="list-area">
        <div class="trouble-type-filter">
          <select class="iu-select" required v-model="troubleLevel">
            <option value="" selected>隐患等级</option>
            <option :value="'一般隐患'">一般隐患</option>
            <option :value="'重大隐患'">重大隐患</option>
          </select>
        </div>
        <template v-if="troubleList.length">
          <riskslist
            class="conent-list"
            :risks-item="item"
            v-for="item in troubleFilter"
            :key="item.id"
            @eventRisksList="eventRisksList"
          ></riskslist>
        </template>
        <template v-else>
          <div class="not-content">
            <img src="/static/img/zwlr-icon.png" />
            <div class="title">暂无隐患</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { Tab, TabItem, Toast, InlineLoading, Datetime } from "vux";
import iuHeader from "@/components/common/header/index";
import SafetyManageDao from "@/daos/safety_manage_dao";
import riskslist from "@/components/common/safetymanage/riskslist";
export default {
  name: "safetyRisks",
  components: {
    Tab,
    TabItem,
    Toast,
    iuHeader,
    riskslist,
    InlineLoading,
    Datetime
  },
  data() {
    return {
      statusIndex: 1,
      showMore: false,
      troubleList: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tag: 1,
      troubleLevel:'',
      tabNav: [
        {
          key: 1,
          value: "待整改",
          num: 0
        },
        {
          key: 3,
          value: "待验收",
          num: 0
        },
        {
          key: 5,
          value: "已逾期",
          num: 0
        },
        {
          key: 7,
          value: "已完成",
          num: 0
        }
      ],
      store: {
        id: 0
      }
    };
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  created() {
    this.statusIndex = this.$route.query.status || 1;
    this.tag = this.$route.query.tag || 1;
  },
  activated() {
    this.getList();
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    troubleFilter() {
      if (!this.troubleLevel) {
        return this.troubleList;
      }
      return this.troubleList.filter(e => e.troubleLevel === this.troubleLevel);
    }
  },
  methods: {
    init() {},
    handler(e) {
      this.pageNum = 1;
      this.pageSize = 10;
      this.statusIndex = e;
    },
    back() {
      this.$router.go(-1);
    },
    getList() {
      console.log(this.tag);
      if (this.tag === 1) {
        this.getCheckTroubleList(1);
        this.getCheckTroubleList(3);
        this.getCheckTroubleList(5);
        this.getCheckTroubleList(7);
      } else {
        this.getMyCheckTroubleList(1);
        this.getMyCheckTroubleList(3);
        this.getMyCheckTroubleList(5);
        this.getMyCheckTroubleList(7);
      }
    },
    eventRisksList({ id }) {
      this.$router.push({
        name: "safetyRisksDetail",
        query: {
          id
        }
      });
    },
    getCertificateMore() {
      this.pageNum++;
      this.getList();
    },
    getCheckTroubleList(status) {
      let params = {
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status
      };
      SafetyManageDao.getCheckTroubleList(params, res => {
        if (status === this.statusIndex) {
          this.troubleList.splice(0);
          if (res) {
            this.troubleList = res.content || [];
          }
        }
        this.tabNav.forEach(element => {
          if (element.key === status) {
            element.num = res.totalElements || 0;
          }
        });
      });
    },
    getMyCheckTroubleList(status) {
      let params = {
        orgId: this.user.org.id,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status
      };
      SafetyManageDao.getMyCheckTroubleList(params, res => {
        if (status === this.statusIndex) {
          this.troubleList.splice(0);
          if (res) {
            this.troubleList = res.content || [];
          }
        }
        this.tabNav.forEach(element => {
          if (element.key === status) {
            element.num = res.totalElements || 0;
          }
        });
      });
    },
    certificateDetail(id) {
      this.store.id = id;
      this.$router.push({
        name: "certificate_manage",
        query: {
          id: id
        }
      });
    },
    eventTabChange(item) {
      this.statusIndex = item.key;
      this.pageNum = 1;
      this.getList();
    },
  }
};
</script>
<style lang="less">
.device-manege-tab {
  background: #292a4d;
  &.vux-tab-wrap {
    padding-top: 50px !important;
  }
  .vux-tab-container {
    height: 50px !important;
  }
  .vux-tab {
    height: 50px !important;
    background: #292a4d !important;
    .vux-tab-item {
      background: none;
      color: #fff;
    }
  }
  .tab-item {
    display: flex;
    flex-direction: column;
    line-height: 1;

    span {
      margin-top: 5px;
      &:nth-child(1) {
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.report_time {
  font-size: 12px;
  color: #ffffff59;
}
.newpage {
  height: 100vh;
  background: #1b1c32;
  overflow-y: scroll;
}
.none_conent {
  text-align: center;
  color: gray;
  /* height:30px;
    line-height:30px; */
  border-bottom: none !important;
}
.newpage_work_more {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  color: #456de6;
}
.newpage_work_second {
  color: #456de6;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.newpage_work_ul {
  display: flex;
  justify-content: space-between;
}
.newpage_work_span {
  font-size: 12px;
  color: #456de6;
}
// .early-type{

// }
.urgent-priority,
.early-type-err {
  color: red;
}
.vital-priority,
.early-type-warning {
  color: #d98806;
}

.newpage_work_li {
  font-size: 12px;
  flex: 1;
  span {
    display: inline-block;
    &:nth-child(1) {
      height: 18px;
      text-align: center;
      line-height: 18px;
      // background:#456de6;
      margin-right: 9px;
    }
    &:nth-child(2) {
      width: 80%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
  }
}

.list-area {
  padding: 16px;
  .conent-list {
    margin-bottom: 16px;
  }
}
.trouble-type-filter {
  padding: 0 0 8px;
  display: flex;
  justify-content: flex-end;
}
.iu-select {
  height: 26px;
  width: 25%;
  padding: 2px 4px 3px;
  border: none;
  outline: none;
  border: 1px solid #eee;
  border-radius: 2px;
  font-size: 14px;
  color: #fff;
  background: transparent;
  // option {
  // background: rgba(255, 255, 255, 0.9);
  // }
}
.newpage_work_conent {
  color: #fff;
  background: #1b1c32;
  padding: 8px;
  .card {
    margin-bottom: 12px;
    text-align: left;
    padding: 0;
    .bg {
      background: #292a4d;
      border-radius: 4px;
      transition: 0.3s all ease-in-out;
      &.active1 {
        background: #383a69;
      }
      .header {
        color: #fff;
        font-size: 17px;
        padding: 0 8px;
        line-height: 38px;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        .more {
          display: inline-block;
          color: #456de6;
        }
        span {
          line-height: 40px;
          font-size: 15px;
          display: inline-block;
          position: absolute;
          top: 0;
          right: 8px;
          &.and {
            color: red;
            padding-top: 2.5px;
          }
          &.gz {
            color: #ff2c2c;
          }
          &.wjk {
            color: rgba(255, 255, 255, 0.6);
          }
          &.tz {
            color: #4fdbe5;
          }
          &.lx {
            color: #dd9710;
          }
          &.yz {
            color: #456de6;
          }
        }
      }
      .title {
        line-height: 40px;
        &.and {
          padding-top: 3px;
        }
      }
      .numberRow {
        line-height: 38px;
        font-size: 16px;
        padding: 0 8px;
        color: rgba(255, 255, 255, 0.6);
        &.and {
          padding-top: 2.5px;
          padding-bottom: 0.5px;
        }
      }
    }
  }
}
.not-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  img {
    width: 64px;
    height: 64px;
    margin-left: 20px;
  }
  .title {
    margin: 8px auto;
    width: 126px;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(158, 198, 251, 1);
    line-height: 20px;
    text-align: center;
  }
}
.newpage_title {
  height: 44px;
  background: #18182c;
  padding: 0 15px;
  display: flex;
  span {
    display: inline-block;
    color: #ffff;
    font-size: 15px;
    vertical-align: middle;
  }
  .nav-left {
    .company-logo {
      height: 100%;
      width: 48px;
    }
  }
  .nav-center {
    flex: 1;
    line-height: 44px;
    text-align: center;
    font-size: 16px;
    color: #fff;
  }
  .nav-right {
    margin-top: 12px;
    width: 36px;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    .paidan {
      margin-top: -8px;
      i {
        font-size: 26px;
      }
    }
  }
  .nav_border_left {
    border-left: 2px solid #fff;
    height: 20px;
  }
}
</style>
